Documentation/ Colors

Each color includes its own sass function. You should never need to use the hex value. Rather, call the Sass function when creating a new element

The colors have been tested for accessibility compliance against three common backgrounds: white #fff, light gray rgb(222,222,222), and black #000. When a color's contrast ratio score is less than 3.0 it fails and that color combination should never be used. When a color's contrast ratio gets a score of at least 3.0 it can used for large text, or text that is 18px or larger. Then when a color's contrast ratio passes it can be used on any text size against the background color it was tested against.

Color Name Hex Sass Function Contrast with White Background Contrast with Gray Background Contrast with Black Background
Arch Black
#000000
color(black)
21
15.6
1
Bulldog Red
#ba0c2f
color(red)
6.6
4.9
⚠️
3.18
Chapel Bell White
#ffffff
color(white)
1
1.34
21
Glory Glory
#e4002b
color(glory)
4.84
⚠️
3.6
⚠️
4.33
Lake Herrick
#00a3ad
color(lake)
⚠️
3.06
2.28
6.84
Hedges
#b7bf10
color(hedges)
2
1.49
10.47
Olympic
#004e60
color(olympic)
9.29
6.91
2.25
Sanford
#554f47
color(sanford)
8.09
6.01
2.59
Herty Field
#594a25
color(field)
8.63
6.42
2.43
Athens
#66435a
color(athens)
8.34
6.2
2.51
Stegeman
#9ea2a2
color(stegeman)
2.57
1.91
8.14
Creamery
#d6d2c4
color(creamery)
1.51
1.12
13.87
Odyssey
#c8d8eb
color(odyssey)
1.45
1.07
14.47
Gray
#dedede
color(gray)
1.34
1
15.6
Light Gray
#f2f2f2
color(light-gray)
1.11
1
18.75
Dark Gray
#666666
color(dark-gray)
5.74
⚠️
4.26
⚠️
3.65

Color Classes

Text Color

Class Description
.util-color-black Sets the text color to be #000000
.util-color-red Sets the text color to be #ba0c2f
.util-color-white Sets the text color to be #ffffff
.util-color-glory Sets the text color to be #e4002b
.util-color-lake Sets the text color to be #00a3ad
.util-color-hedges Sets the text color to be #b7bf10
.util-color-olympic Sets the text color to be #004e60
.util-color-sanford Sets the text color to be #554f47
.util-color-field Sets the text color to be #594a25
.util-color-athens Sets the text color to be #66435a
.util-color-stegeman Sets the text color to be #9ea2a2
.util-color-creamery Sets the text color to be #d6d2c4
.util-color-odyssey Sets the text color to be #c8d8eb
.util-color-gray Sets the text color to be #dedede
.util-color-light-gray Sets the text color to be #f2f2f2
.util-color-dark-gray Sets the text color to be #666666

Background Color

Class Description
.util-background-black Sets the background color to be #000000
.util-background-red Sets the background color to be #ba0c2f
.util-background-white Sets the background color to be #ffffff
.util-background-glory Sets the background color to be #e4002b
.util-background-lake Sets the background color to be #00a3ad
.util-background-hedges Sets the background color to be #b7bf10
.util-background-olympic Sets the background color to be #004e60
.util-background-sanford Sets the background color to be #554f47
.util-background-field Sets the background color to be #594a25
.util-background-athens Sets the background color to be #66435a
.util-background-stegeman Sets the background color to be #9ea2a2
.util-background-creamery Sets the background color to be #d6d2c4
.util-background-odyssey Sets the background color to be #c8d8eb
.util-background-gray Sets the background color to be #dedede
.util-background-light-gray Sets the background color to be #f2f2f2
.util-background-dark-gray Sets the background color to be #666666

Color Tints

The colors documented in the table below can be used at a variety of tint values. To use the tinted color, you should construct the color class as util-color-{colorName}__tintValue or util-background-{colorName}__tintValue. The following colors and tin values can be used in combination:

  • Sanford and Herty Field: 30% and 50%
  • Stegeman, Creamery, and Odyssey: 30%, 50%, and 75%

For example, to use Sanford as a background color at 50% the class would be util-background-sanford__50.

Color Name Hex Tint Level Contrast with White Background Contrast with Gray Background Contrast with Black Background
Sanford
#88847e
30% ⚠️
3.71
2.76
5.64
Sanford
#aaa7a3
50%
2.39
1.78
8.76
Herty Field
#8b8066
30% ⚠️
3.9
2.9
5.37
Herty Field
#aca592
50%
2.45
1.82
8.55
Stegeman
#bbbebe
30%
1.87
1.39
11.22
Stegeman
#cfd1d1
50%
1.53
1.13
13.69
Stegeman
#e7e8e8
75%
1.22
1.09
17.1
Creamery
#e2e0d6
30%
1.32
1.01
15.86
Creamery
#ebe9e2
50%
1.21
1.1
17.28
Creamery
#f5f4f0
75%
1.1
1.22
19.08
Odyssey
#d9e4f1
30%
1.28
1.04
16.31
Odyssey
#e4ecf5
50%
1.19
1.12
17.61
Odyssey
#f1f5fa
75%
1.09
1.22
19.18